<!doctype html>
<html>
<head>
    <meta charset=utf-8>
    <title>K1raK1ra Quiz</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>K1raK1ra☆问答 <small>无法预料的命运舞台</small></h1>
        </div>

        <p>连续正确回答 {{ succ }} 次来获得 flag！</p>
        <div class="progress">
            <div class="progress-bar" style="width: {{ session['count']/succ*100 }}%; min-width: 2em;">
                {{ session['count'] }}
            </div>
        </div>
        
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-info">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        <div class="well">
            <form action="?" method="post">
                <h3>选择以下表情中最令 You 酱悸动的一项：</h3>
                {% for q in qs %}
                    <div class="radio">
                        <label>
                            <input type="radio" name="choice" value="{{ q }}">
                            {{ q }}
                        </label>
                    </div>
                {% endfor %}
                <p>
                    <button class="btn btn-primary" type="submit">提交</button>
                </p>
            </form>
        </div>
    </div>
</body>
</html>